<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

    <title>Button</title>
    <script>
    </script>
    <script src="%VITE_BUNDLE_PATH%" type="module"></script>
    <style>
        .group {
            border: 1px solid red;
            margin: 1rem;
            padding: 1rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }
    </style>
</head>

<body class="button1auto">
    <form>
        <div class="group">
            <ui5-title level="4">ui5-button</ui5-title>
            <ui5-button type="Submit" submits>Test button</ui5-button>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-checkbox</ui5-title>
            <ui5-checkbox text="Test checkbox" name="checkbox" required value="checkbox"></ui5-checkbox>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-color-picker</ui5-title>
            <ui5-color-picker name="color-picker"></ui5-color-picker>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-combobox</ui5-title>
            <ui5-combobox name="combobox" required>
                <ui5-cb-item text="Test combobox item 1"></ui5-cb-item>
                <ui5-cb-item text="Test combobox item 2"></ui5-cb-item>
                <ui5-cb-item text="Test combobox item 3"></ui5-cb-item>
            </ui5-combobox>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-date-picker</ui5-title>
            <ui5-date-picker name="date-picker" required></ui5-date-picker>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-daterange-picker</ui5-title>
            <ui5-daterange-picker name="daterange-picker" required></ui5-daterange-picker>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-datetime-picker</ui5-title>
            <ui5-datetime-picker name="datetime-picker" required></ui5-datetime-picker>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-file-uploader</ui5-title>
            <ui5-file-uploader name="file-uploader" required></ui5-file-uploader>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-input</ui5-title>
            <ui5-input name="datetime-picker" required></ui5-input>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-multi-combobox</ui5-title>
            <ui5-multi-combobox name="multi-combobox" required>
                <ui5-cb-item text="Test multi combobox item 1"></ui5-cb-item>
                <ui5-cb-item text="Test multi combobox item 2"></ui5-cb-item>
                <ui5-cb-item text="Test multi combobox item 3"></ui5-cb-item>
            </ui5-multi-combobox>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-multi-input</ui5-title>
            <ui5-multi-input name="multi-input" required>
                <ui5-token slot="tokens" text="Test token 1"></ui5-token>
                <ui5-token slot="tokens" text="Test token 2"></ui5-token>
                <ui5-token slot="tokens" text="Test token 3"></ui5-token>
            </ui5-multi-input>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-radio-button</ui5-title>
            <div>
                <ui5-radio-button name="radio-button" required text="Test radio button 1"></ui5-radio-button>
                <ui5-radio-button name="radio-button" required text="Test radio button 2"></ui5-radio-button>
                <ui5-radio-button name="radio-button" required text="Test radio button 3"></ui5-radio-button>
            </div>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-range-slider</ui5-title>
            <ui5-range-slider name="range-slider"></ui5-range-slider>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-segmented-button</ui5-title>
            <ui5-segmented-button required name="segmented-button">
                <ui5-segmented-button-item>Test radio button 1</ui5-segmented-button-item>
                <ui5-segmented-button-item>Test radio button 2</ui5-segmented-button-item>
                <ui5-segmented-button-item>Test radio button 3</ui5-segmented-button-item>
            </ui5-segmented-button>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-select</ui5-title>
            <ui5-select name="select" required>
                <ui5-option value="">Option 1</ui5-option>
                <ui5-option>Option 2</ui5-option>
                <ui5-option>Option 3</ui5-option>
            </ui5-select>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-slider</ui5-title>
            <ui5-slider name="slider"></ui5-slider>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-switch</ui5-title>
            <ui5-switch name="switch" required></ui5-switch>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-textarea</ui5-title>
            <ui5-textarea name="textarea" required></ui5-textarea>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-time-picker</ui5-title>
            <ui5-time-picker name="time-picker" required></ui5-time-picker>
        </div>
        <div class="group">
            <ui5-title level="4">ui5-step-input</ui5-title>
            <ui5-step-input name="step-input" required></ui5-step-input>
        </div>
    </form>
</body>

</html>